<template>
    <view>
      <!-- 搜索框 -->
      <my-search></my-search>
      <!-- 选项卡 -->
      <u-sticky bgColor="#fff">
        <u-tabs
         :list="tabList"
         @click="click"
         lineColor="#EB4450"
         :scrollable="false"
         lineWidth="125"
         lineHeight="2"
         ></u-tabs>
      </u-sticky>
      
      <!-- 商品列表 -->
      <view class="goods-list">
        <navigator 
        class="goods-item"
        v-for="item in goodsList"
        :key="item.goods_id"
        :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
        open-type="navigate"
         >
          <image
          class="goods-image"
            :src="item.goods_small_logo || defaultImage"
           mode="aspectFit"
          />

          <view class="goods-info">
            <view class="goods-name">{{item.goods_name}}</view>
            <view class="goods-price">{{item.goods_price}}</view>
          </view>
        </navigator>
      </view>
    </view>
  </template>
  
  <script>
  import { getGoodsSearchList } from '../../api/goods'
  import MySearch from '../../components/MySearch/MySearch.vue'
  export default{
  components: { MySearch },
      data(){
          return{
            // 占位图片: 微信小程序中，尽量不要用本地图片，因为小程序一个包的大小限制为2048kb
              defaultImage:'https://img.zcool.cn/community/0115775ef0232aa801215aa08c54aa.jpg@2o.jpg',
              tabList:[
                {name:'综合'},
                {name:'销量'},
                {name:'价格'},
                
              ],
              queryParams:{},
              total:0 ,
              goodsList:[]
          }
      },
      onLoad(options) {
          console.log(options)
          this.queryParams ={
            cid:options.cid,
            query:options.query,
            pagenum:1,
            pagesize:20
          }
          this.getGoodsList()  
      },
     async onPullDownRefresh() {
        this.queryParams.pagenum = 1
        this.goodsList=[]
        this.total = 0
        await this.getGoodsList()
        uni.stopPullDownRefresh()
      },
      onReachBottom() {
        console.log('上拉触底了')
        if(this.goodsList.length >= this.total){
          uni.showToast({
            title:'我是有底线的~',
            icon:'none',
            mask:true
          })
          return
        }
        this.queryParams.pagenum++
        this.getGoodsList()
      },
      methods:{
        async getGoodsList(){
            const res =await getGoodsSearchList(this.queryParams)
            this.goodsList.push(...res.data.message.goods)
            this.total = res.data.message.total
        },
        click(){

        }
      }
  }
  </script>
  <style lang="scss" scoped>


 


  </style>